<!--
@description ：保单计划详情
-->

<template>
  <div class="page">
    <div>
      <el-button type="primary" @click="$router.go(-1)" size="mini">返回</el-button>
      <el-button type="primary" @click="setReocrd" size="mini" icon="el-icon-edit-outline">服务记录</el-button>
    </div>
    <div class="wrap g-card">
        <div class="title-header">任务基础信息</div>
        <div style="padding: 0 12px 0 20px">
          <infoListTemplate :list.sync="basicInfoArr"></infoListTemplate>
        </div>
    </div>
    <div class="wrap g-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="保单信息" name="1">
          <div style="padding: 0 12px 0 20px">
            <infoListTemplate :list.sync="policyInfoArr"></infoListTemplate>
            <el-divider content-position="left">{{ '险种信息' }}</el-divider>
            <el-table ref="multipleTable" v-loading="loading" :data="riskDataList" height="222px" style="width: 100%;margin: 16px 0 12px">
              <el-table-column v-for="(item,index) in riskColumnArr" :key="index" :label="item.label" :prop="item.prop" :min-width="item.minWidth || 100" :show-overflow-tooltip="item.showTip || false" align="center"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="客户基本信息" name="2">
          <div style="padding: 0 12px 0 20px">
            <infoListTemplate :list.sync="customerInfoArr"></infoListTemplate>
          </div>
        </el-tab-pane>
        <el-tab-pane label="扣费信息" name="3">
          <div style="padding: 0 12px 0 20px">
            <infoListTemplate :list.sync="feeDeductionList"></infoListTemplate>
            <el-divider content-position="left">{{ '历史扣款信息' }}</el-divider>
            <el-table ref="multipleTable" v-loading="loading" :data="deductionDataList" height="222px" style="width: 100%;margin: 16px 0 12px">
                <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
                <el-table-column v-for="(item,index) in deductionColumnArr" :key="index" :label="item.label" :prop="item.prop" :min-width="item.minWidth || 100" :show-overflow-tooltip="item.showTip || false" align="center"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="服务计划轨迹" name="4">
          <div style="padding: 0 12px 0 20px">
            <el-divider content-position="left">{{ '服务计划' }}</el-divider>
            <service-track></service-track>
            <el-divider content-position="left">{{ '历史触达记录' }}</el-divider>
            <el-table ref="multipleTable" v-loading="loading" :data="historyTrackDataList" height="222px" style="width: 100%;margin: 16px 0 12px">
              <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
              <el-table-column v-for="(item,index) in historyTrackColumnArr" :key="index" :label="item.label" :prop="item.prop" :min-width="item.minWidth || 100" :show-overflow-tooltip="item.showTip || false" align="center">
                  <template slot-scope="scope">
                    <span v-if="item.prop == 'f' && scope.row.f == '不愿意交费'" style="color: rgba(246, 25, 25, 0.84)">{{ scope.row.f }}</span>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    style="color: rgb(90, 170, 244);display: inline-block"
                    icon="el-icon-view"
                  >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div class="wrap g-card">
      <div class="title-header">操作台</div>
      <div style="padding: 0 12px 0 20px">
        <operating-floor></operating-floor>
      </div>
    </div>

    <el-drawer
      title="添加服务记录"
      :visible.sync="drawer"
      :direction="direction"
      :size="'60%'"
      :wrapper-closable="false"
      :before-close="handleClose">
      <div class="taskInfo">
        <div class="taskInfoTitle">
          关联任务
          <el-tooltip
            content="当前客户作为投/被保人，存在其他保单正处于任务阶段，则视为此任务的关联任务，可同时进行服务并同步录入服务结果。"
            effect="dark" placement="top-start">
            <img src="../../../assets/renewal/question.png" style="width: 20px;margin-left: 4px">
          </el-tooltip>
        </div>
        <el-form>
        <form-template :form-list.sync="showTaskArr1" style="border-bottom: 1px dashed #ccc;margin-bottom: 12px;padding-bottom: 12px"></form-template>
        <form-template :form-list.sync="showTaskArr2" style="padding-bottom: 12px"></form-template></el-form>
      </div>
      <el-form :model="addServiceForm" ref="addServiceForm" :rules="addServiceRules" label-suffix=":">
      <form-template :form.sync="addServiceForm" :form-list.sync="addServiceFormList" :enum-opt.sync="addServiceOption"></form-template>
      </el-form>
      <div class="drawer-fromBtn">
        <el-button type="info" icon="el-icon-refresh-right" plain @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">保 存</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import infoListTemplate from '@/views/renewal/plannedTaskDetail/infoListTemplate.vue'
import serviceTrack from '@/views/renewal/plannedTaskDetail/serviceTrack.vue'
import operatingFloor from '@/views/renewal/plannedTaskDetail/operatingFloor.vue'
import formTemplate from '@/views/renewal/plannedTaskDetail/formTemplate.vue'
import * as infoList from './formArr.js'
import * as formList from './formList.js'
export default {
  name: "plannedTaskDetail", //保单计划详情
  props:{

  },
  components:{
    infoListTemplate,
    serviceTrack,
    operatingFloor,
    formTemplate
  },
  data(){
    const { basicInfoArr, policyInfoArr, customerInfoArr, riskColumnArr, feeDeductionList, deductionColumnArr, historyTrackColumnArr } = infoList
    const { addServiceFormList, addServiceRules, addServiceOption, showTaskArr1, showTaskArr2 } = formList
    return{
      basicInfoArr,
      policyInfoArr,
      customerInfoArr,
      riskColumnArr,
      feeDeductionList,
      deductionColumnArr,
      historyTrackColumnArr,

      activeName: '1',

      loading: false,
      riskDataList: [{
        a: 'D37482',
        b: '幸运一生终身寿险',
        c: '主险',
        d: '长险',
        e: '有效-正常有效',
        f: '10000.00',
        g: '10000.00',
        h: '10年',
        i: '2023-04-10',
        j: '2023-04-10',
        k: '否',
      },{
        a: 'D37482',
        b: '幸运一生终身寿险',
        c: '附加险',
        d: '短险',
        e: '有效-正常有效',
        f: '100.00',
        g: '100.00',
        h: '10年',
        i: '2023-04-10',
        j: '2023-04-10',
        k: '是',
      }, {
        a: 'D37482',
        b: '幸运一生终身寿险',
        c: '附加险',
        d: '短险',
        e: '有效-正常有效',
        f: '100.00',
        g: '100.00',
        h: '10年',
        i: '2023-04-10',
        j: '2023-04-10',
        k: '否',
      }],

      deductionDataList: [
        {
          a: '续期',
          b: '2',
          c: '3',
          d: '银行转账',
          e: '2023-05-12',
          f: '',
          g: '',
          h: '2023-05-14',
        },
        {
          a: '续期',
          b: '2',
          c: '3',
          d: '银行转账',
          e: '2023-05-12',
          f: '',
          g: '',
          h: '2023-05-14',
        },
        {
          a: '续期',
          b: '2',
          c: '3',
          d: '银行转账',
          e: '2023-05-12',
          f: '',
          g: '',
          h: '',
        }
      ],

      historyTrackDataList: [
        {
          a: '前瞻续收',
          b: '86010311-赵丽',
          c: '2023-01-24',
          d: '网络联系',
          e: '是',
          f: '不愿意交费',
          g: '通过',
          h: '',
        },
        {
          a: '应交前续收',
          b: '86010311-赵丽',
          c: '2023-01-30',
          d: '面访',
          e: '否',
          f: '愿意交费',
          g: '不通过',
          h: '服务记录内容太过简单',
        },
        {
          a: '应交前续收',
          b: '86010311-赵丽',
          c: '2023-02-14',
          d: '网络联系',
          e: '是',
          f: '不确定',
          g: '不通过',
          h: '缺乏实地照片证明服务真实性',
        }
      ],

      drawer: false,
      direction: 'rtl',

      addServiceForm: {
        g: [],
        j: []
      },
      addServiceFormList,
      addServiceRules,
      addServiceOption,
      showTaskArr1,
      showTaskArr2
    }
  },
  watch:{

  },
  methods:{
    handleClick(){

    },

    handleClose(){
      this.drawer = false
    },

    setReocrd(){
      this.drawer = true
      this.resetForm('addServiceForm')
    },

    handleCancel(){
      this.drawer = false
    },

    handleSubmit(){

    },
  },
  mounted() {
    console.log('deductionColumnArr::::::', this.deductionColumnArr)
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.page{
  padding: 12px;
}

.wrap {
  @include titleWrap;
}

.drawer-fromBtn{
  display: flex;
  justify-content: end;
  padding: 16px 32px 0 0;
}

::v-deep{
  .el-drawer__header{
    margin-bottom: 18px;
    padding: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #d9d9d9;
    font-size: 20px;
    color: #000;
  }
  .el-drawer__body{
    padding-left: 16px;
  }
  .el-form-item{
    padding: 4px 10px;
  }

  .el-tooltip__popper.is-dark{
    color: #00afff;
  }
}

.taskInfo{
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 12px;
}

.taskInfoTitle{
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
}
</style>
